<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>
		<sh-today-bill v-if="recentlyBill && isLogin" :recentlyBill="recentlyBill"></sh-today-bill>
		<!-- <sh-adv></sh-adv> -->
		<!-- 自定义模块 -->
		<view v-for="(item, index) in userTemplate" :key="item.id">
			
			<!-- 轮播 -->
		<!-- 	<sh-banner
				v-if="item.type === 'banner' && index !== 0"
				:Px="item.content.x"
				:Py="item.content.y"
				:borderRadius="item.content.radius"
				:height="item.content.height"
				:list="item.content.list"
			></sh-banner> -->
			<!-- 滑动宫格 -->
			<!-- <sh-grid-swiper v-if="item.type === 'menu'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper> -->
			<!-- 广告魔方 -->
			<!-- <sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv> -->
			<!-- 推荐商品 -->
			<!-- <sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods> -->
			<!-- 富文本 -->
			<!-- <sh-richtext v-if="item.type === 'rich-text'" :richId="item.content.id"></sh-richtext> -->
			<!-- 功能列表 -->
			<!-- <sh-cell v-if="item.type === 'nav-list'" :list="item.content.list"></sh-cell> -->
			<!-- 订单卡片 -->
			<!-- <sh-order-card v-if="item.type === 'order-card'"></sh-order-card> -->
			<!-- 九宫格列表 -->
			<sh-grid v-if="item.type === 'grid-list'" :list="item.content.list"></sh-grid>
			<!-- 钱包 -->
			<!-- <sh-wallet v-if="item.type === 'wallet-card'"></sh-wallet> -->
			
		</view>
		<!-- <view class="home-type">
		    <view class="type" v-for="(item,index) in systemType" @tap="jump(item)">
		      <view class="type-img">
		        <image mode="aspectFit" style="width:90rpx;height:90rpx;" :src="item.image" />
		      </view>
		      <view class="type-title theme-text">
		        <text class="type-title_text">{{item.name}}</text>
		      </view>
		    </view>
		</view> -->
		
		<view class="title-area">
			  <view class="round round1" :style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}"></view>
			  <view class="round round2" :style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}"></view>
			  <view class="round round3" :style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}"></view>
			  <text class="title">猜你喜欢</text>
			  <view class="round round4" :style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}"></view>
			  <view class="round round5" :style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}"></view>
			  <view class="round round6" :style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}"></view>
		</view>
		  <!--  <view class="my-product">
		        <view class="my-product-item" v-for="item in prudects" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
		           <view class="product-img">
		                <image mode="aspectFit" style="width:100%;height:100%;" :src="item.img"/>
		           </view>
		           <view class="content-title product-title">
		                <text number-of-lines="1">{{item.title}}</text>
		           </view>
		           <view class="product-price">
		                <text>￥{{item.price}}/天起</text>
		           </view>
		        </view>
		    </view> -->
		<!-- copyright -->
	<!-- 	<view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50" v-if="initShop.copyright">
			<view class="copyright-text">{{ initShop.copyright[0] }}</view>
			<view class="copyright-text">{{ initShop.copyright[1] }}</view>
		</view> -->

		<view>
			<view class="big-goods u-flex u-p-20 u-col-top u-m-b-16" v-for="item in prudects" @tap="$Router.push({ path: '/pages/goods/detail', query: { id: item.id } })">
				<image class="goods-img" lazy-load fade-show :src="item.img" mode="aspectFill"></image>
				<view class=" card-right u-m-l-20 u-flex-col u-row-between">
					<view class="">
						<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10 tit" >
							<!-- <view v-if="type" class=" sm cu-tag radius title-tag u-m-r-10 "
								:style="{ backgroundColor: $COLOR, color: '#fff' }">
								全新 </view> -->
							{{ item.title }}
						</view>
					</view>
			
			
					<view class=" u-flex u-row-between u-col-center">
						<view class="font-OPPOSANS">
							<view class="price">{{ item.price }}</view>
							<!-- 原价删除线 -->
							<!-- <view class="origin-price">{{ originPrice }}</view> -->
						</view>
			
						<view class="cart-box">
							<!-- <view class="" v-if="!detail.is_sku">
								<button v-if="!isCart(detail.id)" @tap.stop="click"
									class="u-reset-button buy-btn u-flex u-row-center u-col-center"
									:style="{'background':'linear-gradient(174deg, ' + $CHANGEA + ' 0%, ' + $COLOR + ' 100%)'}">
									免押租
								</button>
							</view> -->
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 关注弹窗 -->
		<!-- <shopro-float-btn></shopro-float-btn> -->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<!-- <shopro-tabbar></shopro-tabbar> -->
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shTodayBill from './components/sh-todayBill.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';

import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

import share from '@/shopro/share';

export default {
	components: {
		shBanner,
		shTodayBill,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,

		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			phone:this.$PLANE_PHONE,
			enable: false ,//是否开启吸顶。
			prudects:{},
			recentlyBill:null,
			loginShow:true,
			userTemplate:[
		{
			"id":54401,
			"type":"user",
			"category":"user",
			"name":"用户卡片",
			"content":{
				"name":"用户卡片",
				"image":"http://file.shopro.top/uploads/20210518/c4e353836a5d04e92697d22f95d0c5a5.png",
				"style":2,
				"color":"#eeeeee"
			},
			"decorate_id":1
		},
		{
			"id":54402,
			"type":"order-card",
			"category":"user",
			"name":"订单卡片",
			"content":[

			],
			"decorate_id":1
		},
		{
			"id":54403,
			"type":"wallet-card",
			"category":"user",
			"name":"资产卡片",
			"content":[

			],
			"decorate_id":1
		},
		{
			"id":123,
			"type":"banner",
			"category":"user",
			"name":"资产卡片",
			"content":[

			],
			"decorate_id":1
		},
		{
			"id":54404,
			"type":"grid-list",
			"category":"user",
			"name":"宫格列表",
			"content":{
				"name":"",
				"list":[
					{
						"name":"收货地址",
						"image":this.$IMAGE_URL + "/shouhuodizhi.png",
						"path":"/pages/user/address/list",
						"path_name":"收货地址",
						"path_type":1
					},
					{
						"name":"客服电话",
						"image":this.$IMAGE_URL + "/kefu-3.png",
						"path":"/pages/user/view-log",
						"path_name":"客服电话",
						"path_type":2
					},
					
					{
						"name":"系统设置",
						"image":this.$IMAGE_URL + "/xitongshezhi.png",
						"path":"/pages/user/set",
						"path_name":"系统设置",
						"path_type":1
					},
					{
						"name":"退出登录",
						"image":this.$IMAGE_URL + "/jieshu.png",
						"path":"/pages/app/score/list",
						"path_name":"退出登录",
						"path_type":2
					},
					// {
					//     "name":"我的拼团",
					//     "image":this.$IMAGE_URL + "/xitongshezhi.png",
					//     "path":"/pages/activity/groupon/my-groupon",
					//     "path_name":"我的拼团",
					//     "path_type":1
					// },
					// {
					//     "name":"常见问题",
					//     "image":this.$IMAGE_URL + "/xitongshezhi.png",
					//     "path":"/pages/public/faq",
					//     "path_name":"常见问题",
					//     "path_type":1
					// },
				  
					// {
					//     "name":"分销中心",
					//     "image":this.$IMAGE_URL + "/xitongshezhi.png",
					//     "path":"/pages/app/commission/index",
					//     "path_name":"分销中心",
					//     "path_type":1
					// },
					// {
					//     "name":"团长申请",
					//     "image":this.$IMAGE_URL + "/xitongshezhi.png",
					//     "path":"/pages/app/merchant/apply",
					//     "path_name":"门店入驻",
					//     "path_type":1
					// }
				]
        },
        "decorate_id":1,
    }
],
	systemType:[
					{
						"name":"收货地址",
						"image":this.$IMAGE_URL + "/shouhuodizhi.png",
						"path":"/pages/user/address/list",
						"path_name":"收货地址",
						"path_type":1
					},
					{
						"name":"客服电话",
						"image":this.$IMAGE_URL + "/kefu-3.png",
						"path":"/pages/user/view-log",
						"path_name":"客服电话",
						"path_type":2
					},
					
					{
						"name":"系统设置",
						"image":this.$IMAGE_URL + "/xitongshezhi.png",
						"path":"/pages/user/set",
						"path_name":"系统设置",
						"path_type":1
					},
					{
						"name":"退出登录",
						"image":this.$IMAGE_URL + "/jieshu.png",
						"path":"/pages/app/score/list",
						"path_name":"退出登录",
						"path_type":2
					},
					{
					    "name":"身份认证",
					    "image":this.$IMAGE_URL + "/xitongshezhi.png",
					    "path":"/pages/user/verifyIdentity/index",
					    "path_name":"我的拼团",
					    "path_type":1
					},
					{
					    "name":"个人信息",
					    "image":this.$IMAGE_URL + "/xitongshezhi.png",
					    "path":"/pages/user/info",
					    "path_name":"常见问题",
					    "path_type":1
					},
				]
       
		};
	},
	computed: {
		...mapGetters(['initShop', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			console.log('用户信息',this.userInfo)
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		}
	},
	watch:{
		isLogin(newData,oldData){
			if(newData){
				this.init();
				this.getUserData();
			}
		}
	},
	
	// 下拉刷新
	onPullDownRefresh() {
		this.init()
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

	onShow() {
		console.log('onShow')
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}else{
			console.log(1,this.loginShow)
			if(this.loginShow){
				this.login()
			}
		}
		
		this.getEventsGoods()
		this.enable = true;
	},

	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		// 初始化
		init() {
			this.getList()
			this.getUserInfo()
				.then(res => {
					console.log('chengg')
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		jump(data) {
			if(data.path_type == 1){
				this.$tools.routerTo(data.path);
				return;
			}
			if(data.path_name == '退出登录'){
				this.showModal = true
			}
			
			if(data.path_name == '客服电话'){
				console.log('客服电话',this.phone)
				uni.makePhoneCall({
					phoneNumber:this.phone,
					success:function(){
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			
			}
		},
		// 本机一键登录
		login(){
			let that = this
			uni.login({
				provider: 'univerify',
				univerifyStyle: { // 自定义登录框样式
					//参考`univerifyStyle 数据结构`
					"fullScreen": true, // 是否全屏显示，默认值： false
					"title": '快速登录',
					"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
					"icon": {
						"path": "../../static/logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo
					},
					"phoneNum": {
						"color": "#000000", // 手机号文字颜色 默认值：#000000
						"fontSize": "18" // 手机号字体大小 默认值：18
					},
					"slogan": {
						"color": "#8a8b90", //  slogan 字体颜色 默认值：#8a8b90
						"fontSize": "12" // slogan 字体大小 默认值：12
					},
					// 一键登录
					"authButton": {
						"normalColor": "#3479f5", // 授权按钮正常状态背景颜色 默认值：#3479f5
						"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）
						"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）
						"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff
						"title": "本机号码一键登录" // 授权按钮文案 默认值：“本机号码一键登录”
					},
					// 其他登录方式
					"otherLoginButton": {
						"visible": "true", // 是否显示其他登录按钮，默认值：true
						"normalColor": "#f8f8f8", // 其他登录按钮正常状态背景颜色 默认值：#f8f8f8
						"highlightColor": "#dedede", // 其他登录按钮按下状态背景颜色 默认值：#dedede
						"textColor": "#000000", // 其他登录按钮文字颜色 默认值：#000000
						"title": "密码登录", // 其他登录方式按钮文字 默认值：“其他登录方式”
						"borderWidth": "1px", // 边框宽度 默认值：1px（仅ios支持）
						"borderColor": "#c5c5c5" //边框颜色 默认值： #c5c5c5（仅ios支持）
					},
					// 自定义按钮登录方式
					"buttons": { // 仅全屏模式生效，配置页面下方按钮  （3.1.14+ 版本支持）  
						"iconWidth": "45px",        // 图标宽度（高度等比例缩放） 默认值：45px  
						"list": [{  
								"provider": "apple",
								"iconPath": "/static/test.jpg",  // 图标路径仅支持本地图片  
							},  
							{  
								"provider": "weixin",
								"iconPath": "/static/test.jpg",  
							}  
						]  
					},
					// "privacyTerms": {
					// 	"defaultCheckBoxState": "true", // 条款勾选框初始状态 默认值： true
					// 	"textColor": "#8a8b90", // 文字颜色 默认值：#8a8b90
					// 	"termsColor": "#1d4788", //  协议文字颜色 默认值： #1d4788
					// 	"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”
					// 	"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”
					// 	"fontSize": "12", // 字体大小 默认值：12,
					// 	"privacyItems": [
					// 		// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
					// 		{
					// 			"url": "https://", // 点击跳转的协议详情页面
					// 			"title": "用户服务协议" // 协议名称
					// 		}
					// 	]
					// }
				},
				 //自定义登录框样式
				success(res) {
					// 登录成功
					console.log(res) // {openid:'登录授权唯一标识',access_token:'接口返回的 token'}

					uniCloud.callFunction({
							name: 'getPhoneNumber', // 你的云函数名称
							data: {
								access_token: res.authResult.access_token, // 客户端一键登录接口返回的access_token
								openid: res.authResult.openid // 客户端一键登录接口返回的openid
							}
						})
						.then(dataRes => {
							console.log('云函数返回的参数', dataRes)
							if(dataRes.result.code == 0){
								that.$http(
										"user.appPhoneLogin",
										{
											phone:dataRes.result.data.phoneNumber,
										},
										"登录中..."
									)
									.then(res => {
										if (res.code === 200) {
											uni.closeAuthView();
											that.getUserInfo(res.data.token);
											that.$u.toast(res.msg);
										} else {
											that.$u.toast(res.msg);
										}
									});
							}
							// uni.closeAuthView() //关闭一键登录弹出窗口
							// uni.redirectTo({
							// 	url: '/pages/home/index'
							// })
						})
						.catch(err => {
							uni.closeAuthView() //关闭一键登录弹出窗口
							that.$u.toast(err.msg);
							console.log('云函数报错', err)
						})
				},
				fail(res) {
					console.log('本机一键登录失败',res)
					that.loginShow = false
					// 登录失败
					uni.closeAuthView() //关闭一键登录弹出窗口
				}
			})
		},
		getEventsGoods(){
			this.$http('common.home').then(res => {
				if (res.code === 200) {
					let eventsGoods = JSON.parse(res.data.eventsGoods)
					this.prudects = eventsGoods.prudects
					console.log(111,this.prudects)
				}
			});
		},
		upTime(format,time) {
		    if(!time) {
		        return ''
		    }
		    // let format = "%Y-%M-%D %h:%m:%s"
		    format = format ? format: "%Y-%M-%D"
		    time = time.toString().length == 10 ? time*1000:time
		    let dataTime = new Date(time)
		    let year = dataTime.getFullYear()
		    let month = (dataTime.getMonth() + 1).toString().padStart(2, 0)
		    let day = dataTime.getDate().toString().padStart(2, 0)
		    let Hours = dataTime.getHours().toString().padStart(2, 0)
		    let Minutes = dataTime.getMinutes().toString().padStart(2, 0)
		    let Seconds = dataTime.getSeconds().toString().padStart(2, 0)
		    format = format.replace(/(%Y|%M|%D|%h|%m|%s)/g, (n) => {
		        return {
		            '%Y': year, '%M': month, '%D': day, '%h': Hours, '%m': Minutes, '%s': Seconds,
		        }[n]
		    })
			    return format
		
		},
		getList(){
		    if(this.isLogin){
		
		    let newDate = new Date();
		    
		    let year = newDate.getFullYear();
		    let month = newDate.getMonth() + 1;
		
		    let thisMonthDay = new Date(year, month, 0).getDate();
		
		    let beforTimer = new Date(year+'/'+month+'/01').getTime();
		    let yearTimer = new Date(year+'/'+month+'/' + thisMonthDay).getTime();
		
		
		    let startTime = Math.floor(beforTimer/1000) + '';
		    let endTime = Math.floor(yearTimer/1000) + '';
		
		    let data = {
		      startPeriodStartDate: startTime,
		      startPeriodEndDate: endTime,
		    }
			console.log('zhangdan参数',data)
			this.$http('order.monthList',data).then(res => {
				if(res.code == 200 && res.data.length>0){
					res.data[0].expiretime = this.upTime("%M月%D日",res.data[0].expiretime);
					this.recentlyBill= res.data[0]
				}else{
				  this.recentlyBill= null
				}
			});
			
		}
		
		},
	}
};
</script>

<style lang="scss" scoped>
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #c4c4c4;
	}
}

.title-area {
	height: 20rpx;
	background: #f7f7f7;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	.title-area .round {
		border-radius: 50%;
		background: linear-gradient(180deg, #fbdc97 0%, #f69b24 100%);
		/* background: linear-gradient(180deg, #fff 0%, #108EE9 50%); */
		margin-right: 10px;
	}
	.title-area .round1,
	.title-area .round6 {
		width: 5rpx;
		height: 5rpx;
	}
	.title-area .round2,
	.title-area .round5 {
		width: 8rpx;
		height: 8rpx;
	}
	.title-area .round3,
	.title-area .round4 {
		width: 12rpx;
		height: 12rpx;
		margin-right: 21rpx;
	}
	.title-area .title {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-right: 21rpx;
	}
	.title-area .round4 {
		margin-right: 10rpx;
	}
	.title-area .round6 {
		margin-right: 0;
	}
	/* my-product */
	.my-product {
	    width: 710rpx;
	    
	    margin: 40rpx 20rpx 40rpx;
	    border-radius: 15rpx;
	    display: flex;
	    flex-wrap: wrap;
	    justify-content: space-between;
	}
	.my-product-item {
	    width: 340rpx;
	    height: 420rpx;
	    padding: 40rpx 30rpx 30rpx;
	    box-sizing: border-box;
	    border-radius: 15rpx;
	    background-color: #fff;
	    margin-bottom: 30rpx;
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
	    align-items: center;
	    box-shadow: 0 0 15rpx 10rpx #eee;
	}

.product-img {
    width: 220rpx;
    height: 260rpx;
    /* background-color: #ccc; */
}

.product-price {
    color: #F63737;
}
.content-title{
  width: 100%;
  margin-top: 6px;
}
.product-title{
	  overflow:hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  -o-text-overflow:ellipsis;
}

// 大商品卡片
	.big-goods {
		width: 710rpx;
		min-height: 260rpx;
		background: #ffffff;
		border-radius: 20rpx;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-left: 20rpx;
		
		.goods-img {
			width: 260rpx;
			height: 260rpx;
			background-color: #f5f5f5;
			border-radius: 6rpx;
		}

		.card-right {
			width: 430rpx;
			height: 220rpx;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 600;
			width: 400rpx;
			color: #000000;
			padding-top: 6rpx;

			.title-tag {
				transform: scale(0.9);
				position: relative;
				top: -6rpx;
			}
		}
		.tit{
			padding: 20rpx;
		}
		.subtitle-text {
			font-size: 22rpx;
			width: 400rpx;
			font-weight: 500;
			color: #666666;
		}

		.tag-box {
			border: 1rpx solid #ff0000;
			display: inline-block;
			font-size: 20rpx;
			line-height: 30rpx;
			padding: 0 10rpx;
			color: #ff0000;
			border-radius: 8rpx;
		}

		// 购物车
		.cart-box {
			.cart-btn {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				padding: 0;
				background: linear-gradient(90deg, #e9b461, #eecc89);
			}

			.buy-btn {
				width: 120rpx;
				line-height: 50rpx;
				background: linear-gradient(90deg, #e9b461, #eecc89);
				border-radius: 25rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}

		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}

		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;
			text-decoration: line-through;

			&::before {
				content: '￥';
				font-size: 20rpx;
			}
		}
	}
	
	/* type */
	.home-type {
		background: #FFFFFF;
		width: 100%;
		border-radius: 16rpx;
		margin: 30rpx auto 30rpx;
		padding:25rpx 40rpx;
		box-sizing: border-box;
		overflow: hidden;
	}
	.type {
	  height: 200rpx;
	  float: left;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  align-items: center;
	  margin-left: 90rpx;
	}
	.type-img{
	  border-radius: 58rpx;
	  overflow: hidden;
	}
	.type:nth-child(1){
	  margin-left: 0;
	}
	.type:nth-child(5){
	  margin-left: 0;
	}
	.type-title{
	  margin-top: 10rpx;
	  margin-bottom: 30rpx;
	  color: #333333;
	  font-size: 24rpx;
	}
	.type-title_text{
	  /* width: 72rpx; */
	  height: 34rpx;
	  font-size: 24rpx;
	  color: #333333;
	  line-height: 34rpx;
	}
</style>
